"use client";

import { useParams, usePathname, useRouter } from 'next/navigation'
import { Card, Button, Descriptions } from 'antd'
import { ArrowLeftOutlined } from '@ant-design/icons'
import { useApp } from '@/app/context/app-context'
import ChatBox from '@/app/components/chat/chat-box'
import { RiRobot2Line, RiBrainLine } from "@remixicon/react";
import AppCard from "./app-card";

interface AppItem {
  key: string
  label: string
  icon: string
  description: string
  href: string
}

// 应用数据映射表
const APP_DATA: Record<string, { key: string; name: string; description: string; version: string; author: string; createTime: string }> = {
  '1': {
    key: 'chatgpt',
    name: 'ChatGPT',
    description: 'OpenAI 开发的大语言模型，擅长对话和创意写作',
    version: '1.0.0',
    author: '中科数字',
    createTime: '2024-03-20'
  },
  '2': {
    key: 'claude',
    name: 'Claude',
    description: 'Anthropic 开发的AI助手，擅长分析和学术写作',
    version: '1.0.0',
    author: '中科数字',
    createTime: '2024-03-20'
  },
  '3': {
    key: 'gemini',
    name: 'Gemini',
    description: 'Google 最新的多模态大模型，支持文本、图像理解',
    version: '1.0.0',
    author: '中科数字',
    createTime: '2024-03-20'
  },
  '4': {
    key: 'qianwen',
    name: '通义千问',
    description: '阿里云开发的中文大模型，深度理解中文语境',
    version: '1.0.0',
    author: '中科数字',
    createTime: '2024-03-20'
  },
  '5': {
    key: 'baichuan',
    name: '百川',
    description: '国产开源大模型，在多个中文任务上表现优异',
    version: '1.0.0',
    author: '中科数字',
    createTime: '2024-03-20'
  }
}

const llmModels: AppItem[] = [
  {
    key: "chatgpt",
    label: "ChatGPT",
    icon: "🤖",
    description: "OpenAI 开发的大语言模型，擅长对话和创意写作",
    href: "/explore/installed/1",
  },
  {
    key: "claude",
    label: "Claude",
    icon: "🧠",
    description: "Anthropic 开发的AI助手，擅长分析和学术写作",
    href: "/explore/installed/2",
  },
  {
    key: "gemini",
    label: "Gemini",
    icon: "💫",
    description: "Google 最新的多模态大模型，支持文本、图像理解",
    href: "/explore/installed/3",
  },
  {
    key: "qianwen",
    label: "通义千问",
    icon: "🌐",
    description: "阿里云开发的中文大模型，深度理解中文语境",
    href: "/explore/installed/4",
  },
  {
    key: "baichuan",
    label: "百川",
    icon: "🌊",
    description: "国产开源大模型，在多个中文任务上表现优异",
    href: "/explore/installed/5",
  },
]

const agents: AppItem[] = [
  {
    key: "deepresearch",
    label: "DeepResearch",
    icon: "🔍",
    description: "智能研究助手，支持论文分析、文献综述和学术写作",
    href: "/explore/installed/6",
  },
  {
    key: "writer",
    label: "写作助手",
    icon: "✍️",
    description: "专业写作辅助工具，支持多种文体创作和文章润色",
    href: "/explore/installed/7",
  },
  {
    key: "translator",
    label: "翻译专家",
    icon: "🌏",
    description: "多语言翻译助手，支持多种语言互译和本地化优化",
    href: "/explore/installed/8",
  },
  {
    key: "coder",
    label: "代码助手",
    icon: "💻",
    description: "智能编程助手，支持多语言代码生成和问题诊断",
    href: "/explore/installed/9",
  },
]

export default function ExploreContent() {
  const router = useRouter()
  const pathname = usePathname()
  const params = useParams()
  const appId = params.appId as string
  const { installedApps, installApp } = useApp()

  // 如果是应用详情页面
  if (pathname.includes('/explore/installed/')) {
    const appData = APP_DATA[appId]

    if (!appData) {
      return <div className="p-6">应用不存在</div>
    }

    return (
      <div className="flex flex-col h-[calc(100vh-var(--header-height))]">
        <div className="flex-none p-6">
          {/* 返回按钮 */}
          <Button
            icon={<ArrowLeftOutlined />}
            className="mb-6"
            onClick={() => router.push('/explore/apps')}
          >
            返回
          </Button>

          {/* 应用详情 */}
          <Card title={appData.name} className="mb-6">
            <Descriptions column={2}>
              <Descriptions.Item label="版本">{appData.version}</Descriptions.Item>
              <Descriptions.Item label="作者">{appData.author}</Descriptions.Item>
              <Descriptions.Item label="创建时间">{appData.createTime}</Descriptions.Item>
            </Descriptions>
            <p className="mt-4 text-gray-600">{appData.description}</p>
          </Card>
        </div>

        {/* 聊天界面 */}
        <div className="flex-1 overflow-hidden">
          <ChatBox appKey={appData.key} />
        </div>
      </div>
    )
  }

  // 如果是应用列表页面
  return (
    <div className="h-[calc(100vh-var(--header-height))] flex flex-col">
      <div className="flex-1 overflow-y-auto p-6">
        {/* LLM 模型 */}
        <div className="mb-8">
          <div className="flex items-center mb-4">
            <RiRobot2Line className="w-5 h-5 mr-2" />
            <h2 className="text-lg font-medium">通用大模型</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {llmModels.map((model) => (
              <AppCard
                key={model.key}
                app={model}
                isInstalled={installedApps.includes(model.key)}
                onInstall={() => installApp(model)}
              />
            ))}
          </div>
        </div>

        {/* 智能助手 */}
        <div>
          <div className="flex items-center mb-4">
            <RiBrainLine className="w-5 h-5 mr-2" />
            <h2 className="text-lg font-medium">智能体（Agents）</h2>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {agents.map((agent) => (
              <AppCard
                key={agent.key}
                app={agent}
                isInstalled={installedApps.includes(agent.key)}
                onInstall={() => installApp(agent)}
              />
            ))}
          </div>
        </div>
      </div>
    </div>
  )
}
